<template>
	<view class='price'>
		<view class="titles">
			<view class="tit1">
				{{ title }}
			</view>
			<view class="tit2">
				<view class="countdown" v-if="status==1">
				      开始倒计时: {{ formattedTime }}
				</view>
				<view class="countdown" v-if="status==2">
				      结束倒计时: {{ formattedTime }}
				</view>
			</view>
		</view>
		<pt-lottery v-if="prizeList.length" ref="pt-lottery" lotteryBg="../../static/images/lotteryBg.png"
			lotteryBtn="../../static/images/lotteryBtn.png" :times="times" :prizeList="prizeList" :showTimes="true"
			@start="start" @end="end">
		</pt-lottery>
		<!-- 抽奖记录 -->
		<view class="record dFlex flexDirection jStart_aCenter" >
			<view class="recordTit">
				抽奖记录
			</view>
			
			<view class="changeDetail">
				<view class="list" v-if='list.length'>
					<view class="line dFlex jStart_aCenter" v-for="(item,index) in list" :key='index'>
						<view class="lineIcon imgPublic">
							<!-- 记录 -->
							<image v-if="item.is_win==2" src="../static/images/zhong.png" mode="widthFix"></image>
							<image v-else src="../static/images/nozhong.png" mode="widthFix"></image>
						</view>
						<view class="lineContent dFlex jBetween_aCenter">
							<view class="lineTit">
								
								<view class="tit" >{{item.content}}</view>
								<view class="time">{{item.create_time}}</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="list empty imgPublic" v-else>
					<image src="../static/images/empty.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ptLottery from "@/components/pt-lottery/pt-lottery";
	export default {
		components: {
			ptLottery
		},
		data() {
			return {
				prizeIndex: 0,
				prizeList: [],
				page: 1,
				times: '',
				content: '您的抽奖次数已用完',
				title: '',
				datas: {
					
				},
				is_chou:1,//1未抽2已抽
				list:[],
				totalSeconds: 3600, // 倒计时总秒数（例如：1小时 = 3600秒）
				formattedTime: '00:00:00', // 格式化后的时间
				timer: null, // 定时器
				status:0,
			};
		},
		onLoad() {
			this.initData();
		},
		onShow() {
			
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + this.userId,
				// imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				imageUrl:'',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + this.userId,
				// imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				imageUrl:"",
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		mounted() {
		    this.startCountdown(); // 页面加载时启动倒计时
		  },
		  beforeDestroy() {
		      // 组件销毁前清除定时器
		      if (this.timer) {
		        clearInterval(this.timer);
		      }
		    },
		methods: {
			startCountdown() {
			      this.timer = setInterval(() => {
			        if (this.totalSeconds > 0) {
			          this.totalSeconds--; // 每秒减少1秒
			          this.formatTime(); // 格式化时间
			        } else {
			          clearInterval(this.timer); // 倒计时结束，清除定时器
			          this.countdownFinished(); // 倒计时结束后的操作
			        }
			      }, 1000); // 每秒执行一次
			    },
			    formatTime() {
			      // 将总秒数格式化为 HH:MM:SS
			      const hours = Math.floor(this.totalSeconds / 3600);
			      const minutes = Math.floor((this.totalSeconds % 3600) / 60);
			      const seconds = this.totalSeconds % 60;
			
			      this.formattedTime = `${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
			    },
			    pad(num) {
			      // 补零函数，确保两位数显示
			      return num < 10 ? `0${num}` : num;
			    },
				countdownFinished() {
					
				  this.initData()
				  if(this.status==1){
					  this.startCountdown()
				  }
				},
			// 数据
			initData() {
				this.tool.getData('Index/awards', {
					memberId:uni.getStorageSync('userId'),
					page: this.page
				}).then(res => {
					if (res) {
						res.award.map((item, idx) => {
							item.image_path = getApp().globalData.domain + item.image;
							/* if(item.id == res.id){
								this.prizeIndex = idx;
							} */
						})
						this.list = res.list;
						this.prizeList = res.award.length ? res.award : [];
						this.times = res.count2;
						this.content = res.content;
						this.title = res.title;
						this.status = res.status;
						this.totalSeconds = res.totalSeconds;
					}
				}).catch(err => {
					console.log(err);
				})
			},
			start() {
				if(this.is_chou==1){
					this.tool.getData('Index/checkaward', {memberId:uni.getStorageSync('userId')}).then(res => {
						console.log(res);
						if (res) {
							this.is_chou=2;
							this.prizeList.map((item, idx) => {
								if (item.id == res.id) {
									this.prizeIndex = idx;
								}
							})
							this.$refs['pt-lottery'].init(this.prizeIndex);
							this.times--;
						}
					}).catch(err => {
						console.log(err);
					})
				}else{
					
					uni.showModal({
						title: '抽奖提示',
						content: this.content,
						success: (op) => {
							
						}
					})
				}
				
			},
			end() {
				
				this.tool.getData('Index/getaward', {
					id: this.prizeList[this.prizeIndex].id,
					memberId:uni.getStorageSync('userId'),
				}).then(res => {
					console.log(res);
					if(res){
						if (this.prizeList[this.prizeIndex].is_win ==2) {
							uni.showModal({
								title: '中奖提示',
								content: '恭喜您抽中' + res.name,
								success: (op) => {
									
								}
							})
						} else {
							uni.showModal({
								title: '抽奖提示',
								content: '很遗憾，未中奖，祝您'+this.prizeList[this.prizeIndex].name,
								success: (op) => {
									
								}
							})
							
						}
					}
				}).catch(err => {
					console.log(err);
				})
				this.initData();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FEF6F8;
	}
	.changeDetail{
		width: 100%;
		.list{
			width: 100%;
			padding: 0 4%;
			box-sizing: border-box;
			.line{
				width: 100%;
				.lineContent{
					flex: 1;
					padding: 20px 0;
					border-bottom: 1px solid #D8D8D8;
					.lineTit{
						flex: 1;
						.time{
							font-size:12px;
							color: #999999;
							margin-top: 6px;
						}
					}
					.lineVal{
						color: #FF3131;
						font-size: 10px;
						text{
							font-size: 14px;
						}
					}
				}
				.lineIcon{
					width: 34px;
					height:34px;
					margin-right: 10px;
				}
			}
			.line:last-child{
				.lineContent{
					border: none;
				}
			}
		}
		.menus{
			width: 100%;
			padding-top: 12px;
			border-bottom: 1px solid #D8D8D8;
			.menuOne{
				flex: 1;
				text-align: center;
				.line{
					width: 40px;
					height:3px;
					border-radius: 50px;
					margin: 9px auto 0;
					background: none;
				}
			}
			.active{
				color: #1664FF;
				.line{
					background: #1664FF;
				}
			}
		}
	}
	.price {
		width: 100%;
		padding: 26rpx 2% 0;
		box-sizing: border-box;
		.record {
			width: 100%;
			padding: 30rpx 44rpx;
			box-sizing: border-box;
			background: white;
			.u-cell-group{
				width: 100%;
			}
			.recordTit {
				width: max-content;
				padding: 4rpx 0;
				border-bottom: 6rpx solid #E32D55;
				font-size: 15px;
				font-weight: bold;
				text-align: center;

			}
		}

		.titles {
			text-align: center;
			font-weight: bolder;
			font-size: 30px;
			margin-bottom: 42rpx;
			line-height: 40px;
			

			.tit2 {
				color: #E32D55;
			}
		}
	}
</style>
